<div class="task-adder-form">
  <form nz-form [formGroup]="taskForm">
    <nz-form-item>
      <nz-form-label nzRequired nzSpan="5">工作名称</nz-form-label>
      <nz-form-control nzSpan="19" nzErrorTip="请输入工作名称">
        <input nz-input formControlName="name">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired nzSpan="5">工作目标</nz-form-label>
      <nz-form-control nzErrorTip="请输入工作目标">
        <input nz-input formControlName="target">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzRequired nzSpan="5">重要程度</nz-form-label>
      <nz-form-control nzErrorTip="请输入工作重要程度">
        <nz-select formControlName="importance" nzAllowClear>
          <nz-option nzValue="0" nzLabel="重要"></nz-option>
          <nz-option nzValue="1" nzLabel="很重要"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired nzSpan="5">结束时间</nz-form-label>
      <nz-form-control nzErrorTip="请输入工作结束时间">
        <nz-date-picker formControlName="end" nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss"></nz-date-picker>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired nzSpan="5">循环模式</nz-form-label>
      <nz-form-control nzErrorTip="请输入工作循环模式">
        <nz-select formControlName="repeatMode" nzAllowClear style="width: 90px;"
          (ngModelChange)="handleRepeatModeChange($event)">
          <nz-option [nzValue]="0" nzLabel="每日"></nz-option>
          <nz-option [nzValue]="1" nzLabel="每周"></nz-option>
          <nz-option [nzValue]="2" nzLabel="每月"></nz-option>
          <nz-option [nzValue]="3" nzLabel="每季"></nz-option>
          <nz-option [nzValue]="4" nzLabel="每半年"></nz-option>
          <nz-option [nzValue]="5" nzLabel="每年"></nz-option>
        </nz-select>
        <div [ngSwitch]="selectedRepeatMode" class="repeat-num-input">
          <div *ngSwitchCase="1">
            <nz-select formControlName="repeatNum" nzAllowClear style="width: 90px;">
              <nz-option [nzValue]="1" nzLabel="周一"></nz-option>
              <nz-option [nzValue]="2" nzLabel="周二"></nz-option>
              <nz-option [nzValue]="3" nzLabel="周三"></nz-option>
              <nz-option [nzValue]="4" nzLabel="周四"></nz-option>
              <nz-option [nzValue]="5" nzLabel="周五"></nz-option>
              <nz-option [nzValue]="6" nzLabel="周六"></nz-option>
              <nz-option [nzValue]="7" nzLabel="周日"></nz-option>
            </nz-select>
          </div>
          <div *ngSwitchCase="2">&nbsp; <nz-input-number formControlName="repeatNum" [nzMin]="1" [nzMax]="31" [nzStep]="1"
              class="repeat-num-text"></nz-input-number> 日</div>
          <div *ngSwitchCase="3">第 <nz-input-number formControlName="repeatNum" [nzMin]="1" [nzMax]="93" [nzStep]="1"
            class="repeat-num-text"></nz-input-number> 天</div>
          <div *ngSwitchCase="4">第 <nz-input-number formControlName="repeatNum" [nzMin]="1" [nzMax]="183" [nzStep]="1"
            class="repeat-num-text"></nz-input-number> 天</div>
          <div *ngSwitchCase="5">第 <nz-input-number formControlName="repeatNum" [nzMin]="1" [nzMax]="366" [nzStep]="1"
            class="repeat-num-text"></nz-input-number> 天</div>

        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="5">属性标签</nz-form-label>
      <nz-form-control>
        <nz-tag *ngFor="let tag of adderTags" (nzOnClose)="handleAdderTagerClose(tag)" [nzMode]="'closeable'">
          {{ sliceTagName(tag) }}
        </nz-tag>
        <nz-tag *ngIf="!tagInputVisible" class="editable-tag" nzNoAnimation (click)="showTagInput()">
          <i nz-icon nzType="plus"></i>
          New Tag
        </nz-tag>
        <input #inputElement nz-input nzSize="small" *ngIf="tagInputVisible" [ngModelOptions]="{standalone: true}"
          type="text" [(ngModel)]="tagInputValue" style="width: 78px;" (blur)="handleTagInputConfirm()"
          (keydown.enter)="handleTagInputConfirm()" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="5">工作描述</nz-form-label>
      <nz-form-control>
        <textarea nz-input formControlName="description"></textarea>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
